<template>
  <el-card>
      <div slot="header" class="clearfix">
    <span>影院列表</span>    
  </div>
    <el-table
      :data="cinemaData"
      border
      style="width: 100%"
      v-loading="loading"
      :header-cell-style="{background:'#F3F4F7',color:'#555',fontSize:'16px'}"
    >
      <el-table-column fixed prop="cityId" label="城市Id" width align="center"></el-table-column>
      <el-table-column fixed prop="areaId" label="区域Id" width align="center"></el-table-column>
      <el-table-column prop="cityName" label="城市名称" width align="center"></el-table-column>
      <el-table-column prop="areaName" label="区域名称" width align="center"></el-table-column>
      
      <el-table-column prop="name" label="影院名称" width  align="center"></el-table-column>
      <el-table-column prop="lowPrice" label="最低价格" width  align="center"></el-table-column>
      <el-table-column fixed="right" label="操作"  align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="handleClick(scope)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope)"></el-button>
          <!-- <router-link :to="`/city/edit/${scope.row.cityId}`">编辑</router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
        :hide-on-single-page="value"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  methods: {
    //编辑的方法
    edit(scope) {  
   
      let cinemaId = scope.row.cinemaId;   
      this.$router.push(`/cinema/edit/${cinemaId}`);  
    },
    //表格的操作方法
    handleClick(scope) {
      this.$confirm(`您将删除《${scope.row.name}》影院, 是否继续?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          const data = {
            cinemaId: scope.row.cinemaId
          };
          const url = "/cinema/delById";
          this.$axios.post(url, data).then(res => {

          });

          this.cinemaData.splice(scope.$index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分页方法
    changePage(pageNum) {     
      this.getData(pageNum);
    },

    // 获取数据的方法
    getData(pageNum) {
      const url = "/cinema/getList?pageNum=" + pageNum;
      this.loading = true;
      this.$axios
        .get(url)
        .then(res => {
          console.log("获取影院列表的数据", res);
          this.cinemaData = res.cinemas;         
          this.total = res.total;      
          this.loading = false;
        })
        .catch(err => {
          console.log("err", err);
          this.loading = false;
        });
    },
   
  },
  created() {
    this.getData();
  },

  data() {
    return {
    name:"",
      total: 0,
      cinemaData: [],
      areaName:"",
      pageNum: 1,
      lowPrice:"",
      index: 0,
      loading: false,
      value: true

    };
  }
};
</script>
<style lang="less" scoped>
.clearfix{
  font-size: 22px;
  font-weight: 900;
}
.pages {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 8px;
}
</style>